<template>
  <div class="page-sheet" :class="getClass()" :contenteditable="contenteditable" :data-layout="propsData.pageLayout">
    <PageHeader v-if="!container">
      <template v-slot:page-number>
        <div class="page-number" data-total="1"></div>
      </template>
    </PageHeader>
    <!-- html预览页面 -->
    <div class="page-body" v-if="$store.getters.entry === 'htmlpreview'">
      <p
        :data-annex-number="propsData.annexNumber"
        :data-id="annexNumber.textData.dataId"
        :data-block-id="annexNumber.blockId"
        class="annex-number"
        data-lang="zh"
      >
        <template v-for="item of annexNumber.textData.contentList">{{ item.fullContent }}</template>
        <template v-for="item of annexType.textData.contentList">{{ item.fullContent }}</template>
        <span
          class="annex-title"
          :data-annex-title="propsData.annexName"
          :data-id="annexTitleZh.textData.dataId"
          :data-block-id="annexTitleZh.blockId"
          data-lang="zh"
        >
          <template v-for="item of annexTitleZh.textData.contentList">{{ item.fullContent }}</template>
          <template v-if="annexTitleEn.textData.contentList[0].fullContent">
            (<template v-for="item of annexTitleEn.textData.contentList">{{ item.fullContent }}</template
            >)
          </template>
        </span>
      </p>

      <template v-if="blockList.length">
        <component
          v-for="item of blockList"
          :is="getComponentName(item)"
          :isTitle="item.dataType === propsData.pageType"
          :key="item.blockId"
          :blockData="item"
          :container="container"
          :annexNumber="propsData.annexNumber"
        />
      </template>
    </div>

    <!-- 普通文档页面 -->
    <div class="page-body" v-else>
      <p
        :data-annex-number="propsData.annexNumber"
        :data-id="annexNumber.textData.dataId"
        :data-block-id="annexNumber.blockId"
        contenteditable="false"
        class="annex-number irremovable"
      >
        <span class="letter-spacing" data-lang="zh">{{ annexNumber.textData.contentList[0].fullContent }}</span>
        <span v-if="annexNumber.textData.contentList.length > 1" data-lang="en">{{
          annexNumber.textData.contentList[1].fullContent
        }}</span>
      </p>

      <!-- 附录类型，规范性，资料性 -->
      <p
        :data-annex-type="propsData.pageType"
        :data-id="annexType.textData.dataId"
        :data-block-id="annexType.blockId"
        contenteditable="false"
        class="annex-type irremovable"
        data-lang="zh"
      >
        <span data-lang="zh">{{ annexType.textData.contentList[0].fullContent }}</span>
        <span v-if="annexType.textData.contentList.length > 1" data-lang="en">{{
          annexType.textData.contentList[1].fullContent
        }}</span>
      </p>

      <p
        class="annex-title irremovable"
        contenteditable="true"
        :data-annex-title="propsData.annexName"
        :data-id="annexTitleZh.textData.dataId"
        :data-block-id="annexTitleZh.blockId"
        :class="en ? '' : 'last'"
        data-lang="zh"
      >
        <template v-for="item of annexTitleZh.textData.contentList">{{ item.fullContent }}</template>
      </p>
      <!-- 附录名 -->
      <p
        v-if="en"
        class="annex-title irremovable"
        contenteditable="true"
        :data-annex-title="annexTitleEn.textData.contentList[0].fullContent"
        :data-id="annexTitleEn.textData.dataId"
        :class="en ? 'last' : ''"
        data-lang="en"
        :data-block-id="annexTitleEn.blockId"
      >
        <template v-for="item of annexTitleEn.textData.contentList">{{ item.fullContent }}</template>
      </p>

      <template v-if="blockList.length">
        <component
          v-for="item of blockList"
          :is="getComponentName(item)"
          :isTitle="item.dataType === propsData.pageType"
          :key="item.blockId"
          :blockData="item"
          :container="container"
          :annexNumber="propsData.annexNumber"
        />
      </template>
      <p v-if="!restBlockList.length" data-type="paragraph" :data-id="dataId" :data-block-id="blockId">
        <br data-mce-bogus="1" />
      </p>
    </div>
    <Footnote :footnotes="footnotes" />
    <PageFooter v-if="!container" />
  </div>
</template>
<script>
import PageHeader from '../PageHeader.vue'
import PageFooter from '../PageFooter.vue'
import Paragraph from '../blocks/Paragraph.vue'
import EditorTable from '../blocks/Table.vue'
import EditorFigure from '../blocks/Figure.vue'
import EditorFormula from '../blocks/Formula.vue'
import Example from '../blocks/Example.vue'
import NakedFigure from '../blocks/NakedFigure.vue'
import Endline from '../blocks/Endline.vue'
import ItemList from '../blocks/ItemList.vue'
import ItemNote from '../blocks/ItemNote.vue'
import BlockGroup from '../blocks/BlockGroup.vue'
import { getComponentName, groupBlockList } from '@/utils/helpers'
import Footnote from '../Footnote.vue'
import { v4 as uuid } from 'uuid'
import { pageTypes } from '@/constants/structure'

export default {
  components: {
    PageHeader,
    PageFooter,
    Footnote,
    EditorTable,
    EditorFigure,
    EditorFormula,
    Example,
    NakedFigure,
    Endline,
    BlockGroup,
    ItemList,
    Paragraph,
    ItemNote
  },
  props: {
    container: {
      type: String,
      default: ''
    },
    contenteditable: {
      type: Boolean,
      default: true
    },
    propsData: {
      type: Object,
      default: () => ({})
    }
  },
  provide() {
    return {
      pageType: this.propsData.pageType
    }
  },
  data() {
    return {
      annexNumber: { textData: { contentList: [{}] } },
      annexType: { textData: { contentList: [{}] } },
      annexTitleZh: { textData: { contentList: [{}] } },
      annexTitleEn: { textData: { contentList: [{}] } },
      dataId: uuid(),
      blockId: uuid()
    }
  },
  methods: {
    getComponentName,
    getClass() {
      return [this.propsData.pageType, 'annex']
    }
  },
  computed: {
    en() {
      return this.$store.getters.languageType === 'both'
    },
    blockList() {
      return groupBlockList(this.restBlockList)
    },
    restBlockList() {
      return this.propsData.blockList.filter((i) => {
        return !pageTypes.includes(i.pageType || i.dataType) && i.dataType.indexOf('annex') === -1
      })
    },
    footnotes() {
      // 条文脚注
      let footnotes = []
      this.propsData.blockList?.forEach((blockData) => {
        if (blockData.dataType === 'paragraph') {
          blockData.textData?.contentList?.forEach?.((node, i) => {
            if (node.contentType === 'footnote') {
              footnotes.push({
                ...node
              })
            }
          })
        }
      })
      return footnotes
    }
  },
  mounted() {
    const findBlock = (field, isEn) => {
      return this.propsData.blockList.find((i) => {
        if (field === 'annex_number' && !isEn) {
          i.textData?.contentList?.[0]?.fullContent?.replace(/\s/g, '')
        }
        const lang = isEn ? i.textData?.dataLang === 'en' : i.textData?.dataLang !== 'en'
        return i.dataType === field && lang
      })
    }
    const findBlock2 = (field) => {
      return this.propsData.blockList.find((i) => {
        if (field === 'annex_number') {
          i.textData?.contentList?.[0]?.fullContent?.replace(/\s/g, '')
        }
        return i.dataType === field
      })
    }

    let annexNumber = findBlock2('annex_number')
    let annexType = findBlock2('annex_type_name')
    let annexTitleZh = findBlock('annex_title', false)
    let annexTitleEn = findBlock('annex_title', true)

    if (!annexNumber) {
      annexNumber = {
        blockId: uuid(),
        dataType: 'annex_number',
        textData: {
          dataId: uuid(),
          dataLang: 'zh',
          contentList: [
            {
              contentType: 'text',
              contentNumber: this.propsData.annexNumber,
              content: '附录',
              fullContent: '附录' + this.propsData.annexNumber
            }
          ]
        }
      }
    }
    if (this.en && annexNumber.textData.contentList.length === 1) {
      annexNumber.textData.contentList.push({
        contentType: 'text',
        contentNumber: this.propsData.annexNumber,
        content: 'Annex',
        fullContent: '(' + 'Annex ' + this.propsData.annexNumber + ')'
      })
    }
    this.annexNumber = annexNumber

    if (!annexType) {
      annexType = {
        blockId: uuid(),
        dataType: 'annex_type_name',
        textData: {
          dataId: uuid(),
          dataLang: 'zh',
          contentList: [
            {
              contentType: 'text',
              content: this.propsData.pageType,
              fullContent: '(' + (this.propsData.pageType === 'normativeAnnex' ? '规范性附录' : '资料性附录') + ')'
            }
          ]
        }
      }
    }
    if (this.en && annexType.textData.contentList.length === 1) {
      annexType.textData.contentList.push({
        contentType: 'text',
        content: this.propsData.pageType,
        fullContent: '(' + (this.propsData.pageType === 'normativeAnnex' ? 'Normative' : 'Informative') + ')'
      })
    }
    this.annexType = annexType

    if (!annexTitleZh) {
      annexTitleZh = {
        blockId: uuid(),
        dataType: 'annex_title',
        textData: {
          dataId: uuid(),
          dataLang: 'zh',
          contentList: [
            {
              contentType: 'text',
              content: '[未命名]',
              fullContent: '[未命名]'
            }
          ]
        }
      }
    }
    this.annexTitleZh = annexTitleZh

    if (this.$store.getters.languageType === 'both') {
      if (!annexTitleEn) {
        annexTitleEn = {
          blockId: uuid(),
          dataType: 'annex_title',
          textData: {
            dataId: uuid(),
            dataLang: 'en',
            contentList: [
              {
                contentType: 'text',
                content: 'unknown name',
                fullContent: 'unknown name'
              }
            ]
          }
        }
      }
      this.annexTitleEn = annexTitleEn
    }
  }
}
</script>
